<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/three/three.js"></script>
    <script src="./lib/three/dat.gui.js"></script>
    <script src="./controls/index.js"></script>
  </head>
  <body>
    <script>
      // 创建3D场景对象Scene
      const scene = new THREE.Scene();

      const width = window.innerWidth;
      const height = window.innerHeight;
      // 实例化一个透视投影相机对象
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
      //相机在Three.js三维坐标系中的位置
      // 根据需要设置相机位置具体值
      camera.position.set(0, 0, 20);
      // 创建渲染器对象Renderer
      const renderer = new THREE.WebGLRenderer();
      // 设置渲染器的尺寸
      renderer.setSize(width, height);
      // 将渲染器中的内容添加到body中
      document.body.appendChild(renderer.domElement);

      //创建一个长方体几何对象Geometry
      const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
      // 创建一个材质对象Material
      const cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xff0000,
        wireframe: false,
      });
      // 创建一个网格模型对象Mesh
      const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      scene.add(cube);

      //添加一个球体
      const sphereGeometry = new THREE.SphereGeometry(1, 20, 50);
      const sphereMaterial = new THREE.MeshLambertMaterial({
        color: 0x00ff00,
        wireframe: false,
      });
      const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
      sphere.position.set(3, 1, 0);
      scene.add(sphere);

      //添加一个平面 接收阴影
      const planeGeometry = new THREE.PlaneGeometry(20, 30);
      const planeMaterial = new THREE.MeshBasicMaterial({
        color: 0x999999,
      });
      const plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.rotateZ(20);
      plane.position.set(3, 0, -10);
      scene.add(plane);

      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(-10, 10, 70);

      scene.add(directionalLight);
      // AxesHelper：辅助观察的坐标系
      const axisHelper = new THREE.AxisHelper(80);
      scene.add(axisHelper);

      sphere.castShadow = true;
      cube.castShadow = true;
      plane.receiveShadow = true;
      directionalLight.castShadow = true;
      renderer.shadowMapEnabled = true;
      directionalLight.shadowCameraLeft = -50;
      directionalLight.shadowCameraRight = 50;
      directionalLight.shadowCameraTop = 50;
      directionalLight.shadowCameraBottom = -50;
      directionalLight.shadowCameraNear = 2;
      directionalLight.shadowCameraFar = 200;

      directionalLight.shadowMapWidth = 4096;
      directionalLight.shadowMapHeight = 4096;

      initControls(directionalLight);
      const animation = () => {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        // sphere.rotation.x +=0.01;
        // sphere.rotation.y +=0.01;
        // 使用渲染器，通过相机将场景渲染进来
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
      };
      animation();
    </script>
  </body>
</html>
